import React, { useEffect } from 'react';
import ReactDOM, { render } from "react-dom";
import { withLogin } from "@/plugins/hoc";
import $axios from "@/plugins/request";
import moment from "moment";
import 'moment/locale/zh-cn';
import { Button, Table, message, Popconfirm, Input } from 'antd';
const { Search } = Input;
import { useState } from 'react';
import { useCallback } from 'react';
moment.locale('zh-cn')


function List(props) {
  //删除
  const removeItem = useCallback(async (id) => {
    const { data } = await $axios.delete('/api/users/' + id)
    if (data.code != 1) {
      return message.warning(data.message)
    } else {
      message.success('数据删除成功');
      getDatalist(page)
    }
  }, [])
  // //刷新
  // const refresh = useCallback(() => {
  //   // getDatalist()
  // }, [])
  //增加用户
  const addItem = useCallback(() => {
    // const {data}=await $axios.post("/api/users/0")
    // console.log(data);
    const { history, match } = props;
    history.push(match.path.replace('/list', '') + '/add')
  }, [])

  //修改
  const editItem = useCallback(async (id) => {
    const { history, match } = props;
    // console.log("id,history,match", id, history, match);
    history.push(match.path.replace('/list', '') + '/edit/' + id)
  })

  const [datalist, setDatalist] = useState([]);
  // const [id, setId] = useState([]);
  const [page, setPage] = useState(1);
  const [pagesize, setPagesize] = useState(5);
  const [total, setTotal] = useState([]);
  const [username, setUsername] = useState("")
  const getDatalist = useCallback(async () => {
    const { data: { data } } = await $axios.get('/api/users', {
      params: {
        pagesize,
        page, username
      }
    })
    // console.log("data.list", data.list);
    setTotal(data.total)
    setDatalist(data.list)
  }, [page, pagesize, username])
  useEffect(() => {
    getDatalist();
  }, [getDatalist])
  const [columns] = useState([
    {
      title: '用户名',
      width: 180,
      dataIndex: 'username'
    },
    {
      title: '真实姓名',
      width: 180,
      dataIndex: 'realname'
    },
    {
      title: '邮箱',
      dataIndex: 'email'
    },
    {
      title: '手机号',
      dataIndex: 'tel'
    },
    {
      title: '角色',
      width: 100,
      dataIndex: 'role'
    },
    {
      title: '状态',
      width: 100,
      dataIndex: 'state',
      render: (text, row, index) => {
        return text ? <Button size="small" type="primary" ghost>启用</Button> : <Button size="small" danger>禁用</Button>
      }
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
      render: (text, row, index) => {
        return moment(text).format("YYYY-MM-DD HH:mm:ss")
      }
    },
    {
      title: '修改时间',
      dataIndex: 'update_time',
      render: (text, row, index) => {
        return moment(text).format("YYYY-MM-DD HH:mm:ss")
      }
    },
    {
      title: '操作',
      render: (row) => {
        return (
          <>
            <Button type="primary" size="small" style={{ marginRight: 10 }} onClick={() => {
              editItem(row._id)
            }}>编辑</Button>
            <Popconfirm title="确定删除吗?" onConfirm={
              () => {
                removeItem(row._id)
              }
            }>
              <Button size="small" danger>删除</Button>
            </Popconfirm>
          </>
        )
      }
    },



  ])



  //分页器
  const panigation = {
    size: 'small',
    total: total,
    showSizeChanger: true,
    pageSizeOptions: [5, 10, 15, 20],
    showTotal(total) {
      return `共${total}条数据`
    },
    showQuickJumper: true,
    showSizeChange: true,
    onChange: (page, pagesize) => {
      setPage(page)
      setPagesize(pagesize)
      getDatalist()
    }

  }
  //搜索
  const onSearch = useCallback((value) => {
    setUsername(value)
    // getDatalist(value)
  }, [])
  return (
    <div>
      <div className="top">
        <Search placeholder="搜索用户" onSearch={onSearch} style={{ width: 300, marginRight: 10 }} />
        <Button type="primary" onClick={() => {
          addItem()
        }} style={{ marginBottom: 10, marginRight: 10 }} >添加用户</Button>
        {/* <Button type="primary" onClick={() => {
          refresh()
        }} style={{ marginBottom: 10, marginRight: 10 }} >刷新</Button> */}
      </div>
      <Table rowKey="_id" columns={columns} dataSource={datalist} pagination={panigation} scroll={{ y: 500 }} />
    </div>
  )
}

export default List;













































